<template>
  <div>
    <!-- 1 -->
    <swiper class="swiper" :options='swiperOption'>
      <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">
        Slide {{item}}
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"> </div><!--分页器-->
    </swiper>
    <!-- 2 . 区域滚动效果，分页器可以点击选择(在上面的使用了分页器的效果里面加，clickable:true)，无限循环 -->
    <div class="cont">
      <swiper class="swiper" :options="swiperOption2">
        <swiper-slide class="text"> <!--这个样式必须要设置，否则会出现弹簧效果-->
          <div class="centent">
              区域滚动效果
在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。区域滚动效果
在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。区域滚动效果
在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。区域滚动效果
在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。区域滚动效果
在移动布局里，在大段文章的下拉上拉时，有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件，这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件，里边有一大段文字，然后给文字加入顺畅的下拉上拉效果。
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  // 使用vue-awesome-swiper  S
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  // 使用vue-awesome-swiper  E
  export default {
    data() {
      return {
        slide: [1,2,3,4,5,6,7],
        swiperOption:{
            direction:'vertical', //竖屏效果，默认是横着
            loop:true,  //无限循环
            pagination:{ //分页器
                el:'.swiper-pagination', //div他对应的class
                clickable:true //让分页器可以自由选择, 分页器可点击
            },
            // slidesPerView:2 //一行显示多少个
        },
        // 针对2
        swiperOption2:{
            direction:'vertical', //竖屏效果，默认是横着
            slidesPerView:'auto', //设置同屏显示的数量，默认为1，这里使用auto是随意的意思。
            freeMode:true, // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
            mousewheel:true, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。
        }
      }
    },
    components:{
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  .swiper{
      height: 7rem;
      border-top:1px solid #ccc;
      border-bottom:1px solid #ccc;
  }
  .swiper-slide{
      height: 4rem;
      text-align: center;
      padding-top: 3rem;
      border-bottom: 1px solid #ccc;
  }
  .text{
      font-size: 18px !important;
      text-align: left;
      padding:30px;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
</style>
